<template>
	<!--自定义顶部导航栏-->
	<view class="top-view">
		<view :style="'height:'+topNavigationBarHeight+'px'">
			<view :style="'height:'+capsuleTop+'px'"></view>
			<view :style="['height:'+capsuleHeight+'px','line-height:'+capsuleHeight+'px','padding-left:10px']">零食店</view>
		</view>
		<!--定位的订单收益板块-->
		<view class="profit-view" :style="'top:'+orderProfitSectionTop+'px'">
			<view class="profit-num">
				<text>累计收益(元)</text>
				<text>3</text>
			</view>
			<view class="profit-sale">
				<view>
					<text>今日销售额</text>
					<text>20</text>
				</view>
				<view>
					<text>今日订单数</text>
					<text>20</text>
				</view>
				<view>
					<text>累计订单数</text>
					<text>30</text>
				</view>
			</view>
		</view>
		<!--九宫格-->
		<view class="grid" :style="'top:'+gridTop+'px;'">
			<view v-for="(item,index) in gridItems" :key="index">
				<image :src="item.image" mode="aspectFit"></image>
				<text>{{item.name}}</text>
			</view>
		</view>

	</view>
</template>

<script setup>
	import { onMounted, reactive, toRefs } from 'vue'

	//存储胶囊按钮信息
	const capsuleBoxInfo = reactive({
		capsuleHeight: 0, //高度
		capsuleTop: 0, //距离顶部的高度
		topNavigationBarHeight: 0, //顶部导航栏高度(胶囊高度+胶囊顶部距离)
		orderProfitSectionTop: 0, //订单收益板块距离顶部的 top 值
	})

	const gridSectionBoxInfo = reactive({
		gridTop: 0, //九宫格距离顶部的top值

		gridItems: [{
			image: '/static/detail/hengfu.svg',
			name: '横幅管理'
		}, {
			image: '/static/detail/miaosha.svg',
			name: '秒杀管理'
		}, {
			image: '/static/detail/shangpin.svg',
			name: '商品管理'
		}, {
			image: '/static/detail/dingdan.svg',
			name: '订单管理'
		}, {
			image: '/static/detail/fenlei.svg',
			name: '分类管理'
		}]
	});

	const { capsuleHeight, capsuleTop, topNavigationBarHeight, orderProfitSectionTop } = toRefs(capsuleBoxInfo)
	const { gridTop, gridItems } = toRefs(gridSectionBoxInfo)


	onMounted(() => {
		//获取胶囊按钮位置信息
		getCapsuleBoxInfo()
		getProfitSectionBoxInfo()
	});


	//获取胶囊按钮的位置数据
	function getCapsuleBoxInfo() {
		const buttonData = wx.getMenuButtonBoundingClientRect()
		capsuleBoxInfo.capsuleTop = buttonData.top
		capsuleBoxInfo.capsuleHeight = buttonData.height
		capsuleBoxInfo.topNavigationBarHeight = capsuleBoxInfo.capsuleTop + capsuleBoxInfo.capsuleHeight
		capsuleBoxInfo.orderProfitSectionTop = capsuleBoxInfo.topNavigationBarHeight + 20
	}

	//计算收益板块高度
	function getProfitSectionBoxInfo() {
		const query = wx.createSelectorQuery()
		query.select('.profit-view').boundingClientRect()
		query.exec(res => {
			gridSectionBoxInfo.gridTop = res[0].height + capsuleBoxInfo.orderProfitSectionTop + 10
		})
	}
</script>

<style>
	page {
		background-color: #f4f4f4;
	}

	.top-view {
		height: 330rpx;
		position: relative;
		background-image: linear-gradient(to top, #9be15d 0%, #00e3ae 100%);
	}

	.profit-view {
		background-color: #FFFFFF;
		position: absolute;
		left: 20rpx;
		right: 20rpx;
		border-radius: 10rpx;
		padding: 20rpx;
	}

	.profit-num {
		display: flex;
		flex-direction: column;
		padding-bottom: 10rpx;
	}

	.profit-num text:nth-child(2) {
		font-size: 40rpx;
		padding-top: 10rpx;
	}

	.profit-sale {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.profit-sale view {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.profit-sale view text:nth-child(1) {
		color: #a7a7a7;
		padding-bottom: 10rpx;
	}

	.profit-sale view text:nth-child(2) {
		font-weight: bold;
	}

	.grid {
		background-color: #FFFFFF;
		margin: 0 20rpx 20rpx 20rpx;
		border-radius: 10rpx;
		display: flex;
		flex-wrap: wrap;
		position: absolute;
		left: 0;
		right: 0;
		color: #555555;
	}

	.grid image {
		width: 55rpx;
		height: 55rpx;
		display: block;
		margin-bottom: 20rpx;
	}

	.grid view {
		width: calc(25% - 10rpx*2);
		margin: 20rpx 10rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
</style>